<template>
    <div class="home app_content">
        <!-- 导航栏 -->
        <div class="header_body">
            <header-nav :leftArrow="false" titelText="首页"></header-nav>
        </div>

        <!-- 中间 -->
        <div class="warp_body">
            <refresh-list v-model:freshMap="freshMap" @refresh="onRefresh" @onLoad="onLoad">
                <div class="carousel_box">
                    <carousel-card v-if="carouselList.length" v-model:carouselList="carouselList"></carousel-card>
                </div>
                <div class="boutique_box">
                    <van-cell :border="false" title="精品" />
                    <div class="boutique_body">
                        <goodsCard :goodsList="boutique" :cardAttr="boutiqueAttr"></goodsCard>
                    </div>
                </div>
            </refresh-list>
        </div>

        <!-- 底部 -->
        <div class="footer_body">
            <footer-nav></footer-nav>
        </div>
    </div>
</template>

<script setup name="Home">
import api from "@/api"

const { useHome } = $globalStore;

let carouselList = reactive([]); // 轮播列表
let boutique = reactive([]); // 精品数据
let freshMap = reactive({
    refreshLoad: false, // 是否刷新
    listLoading: false, // 是否加载中
    listFinished: false, // 是否加载完成标识
});
const boutiqueAttr = reactive({
    columnNum: 4,
    itemClass: "boutique_item",
    goodsCradclass: "boutique-crad",
}); // 商品卡片展示

//获取轮播
const getCarousel = async () => {
    api.getCarousel().then(res => {
        carouselList = res
    })
};

// 精品
const boutiqueGoods = () => {
    api.boutiqueGoods().then(res => {
        boutique = res
    })
}

// 下拉刷新
const onRefresh = () => {
    console.log('下拉刷新')
    freshMap.listFinished = false
    freshMap.listLoading = true;
    freshMap.refreshLoad = false;
}

// 触底加载
const onLoad = () => {

}

onMounted(() => {
    getCarousel()
    boutiqueGoods()
});
</script>

<style lang="less" scoped>
.home {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;

    .warp_body {
        .carousel_box {
            height: 150px;
            width: 100%;
            padding-bottom: 10px;
        }
    }

    .boutique_box {
        .boutique_body {
            padding: 0px 0px 10px 0px;
        }
    }
}
</style>
